<template>
    <div class="app-container">

        <div class="Search">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="query">
            <el-form-item>
    <el-input v-model="query.params.bigType" placeholder="大类" />
</el-form-item>
<el-form-item>
    <el-input v-model="query.params.code" placeholder="代码" />
</el-form-item>
        <el-form-item>
    <el-input v-model="query.params.createBy" placeholder="创建者" />
</el-form-item>
        <el-form-item>
    <el-date-picker v-model="query.params.createDate" type="date" placeholder="创建时间">
    </el-date-picker>
</el-form-item>
                <el-form-item>
    <el-date-picker v-model="query.params.createDate" type="date" placeholder="创建时间">
    </el-date-picker>
</el-form-item>
                <el-form-item>
    <el-input v-model="query.params.desc" placeholder="描述" />
</el-form-item>
        <el-form-item>
    <el-input v-model="query.params.id" placeholder="主键" />
</el-form-item>
<el-form-item>
    <el-input v-model="query.params.nameSpace" placeholder="命名空间" />
</el-form-item>
        <el-form-item>
    <el-input v-model="query.params.organId" placeholder="所属机构" />
</el-form-item>
<el-form-item>
    <el-input v-model="query.params.organPath" placeholder="组织路径" />
</el-form-item>
        <el-form-item>
    <el-input v-model="query.params.parentId" placeholder="父枚举" />
</el-form-item>
<el-form-item>
    <el-input v-model="query.params.remarks" placeholder="备注" />
</el-form-item>
<el-form-item>
    <el-select v-model="query.params.sort" placeholder="排序">
        <el-option
                v-for="item in query.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</el-form-item>
        <el-form-item>
    <el-input v-model="query.params.sys" placeholder="所属系统" />
</el-form-item>
<el-form-item>
    <el-input v-model="query.params.updateBy" placeholder="更新者" />
</el-form-item>
        <el-form-item>
    <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
    </el-date-picker>
</el-form-item>
                <el-form-item>
    <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
    </el-date-picker>
</el-form-item>
                <el-form-item>
    <el-input v-model="query.params.value" placeholder="枚举值" />
</el-form-item>


                    <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                    </el-form-item>
                    <el-form-item>
<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

        </div>

        <div class="block">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
            >
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
{{ scope.$index }}
                    </template>
                </el-table-column>

            <el-table-column label="大类" width="110">
<template slot-scope="scope">
    {{ scope.row.bigType }}
</template>
                    </el-table-column>
            <el-table-column label="代码" width="110">
<template slot-scope="scope">
    {{ scope.row.code }}
</template>
                    </el-table-column>
            <el-table-column label="创建者" width="110">
<template slot-scope="scope">
    {{ scope.row.createBy }}
</template>
                    </el-table-column>
            <el-table-column label="创建时间" width="110">
<template slot-scope="scope">
    {{ scope.row.createDate }}
</template>
                    </el-table-column>
            <el-table-column label="描述" width="110">
<template slot-scope="scope">
    {{ scope.row.desc }}
</template>
                    </el-table-column>
            <el-table-column label="主键" width="110">
<template slot-scope="scope">
    {{ scope.row.id }}
</template>
                    </el-table-column>
            <el-table-column label="命名空间" width="110">
<template slot-scope="scope">
    {{ scope.row.nameSpace }}
</template>
                    </el-table-column>
            <el-table-column label="所属机构" width="110">
<template slot-scope="scope">
    {{ scope.row.organId }}
</template>
                    </el-table-column>
            <el-table-column label="组织路径" width="110">
<template slot-scope="scope">
    {{ scope.row.organPath }}
</template>
                    </el-table-column>
            <el-table-column label="父枚举" width="110">
<template slot-scope="scope">
    {{ scope.row.parentId }}
</template>
                    </el-table-column>
            <el-table-column label="备注" width="110">
<template slot-scope="scope">
    {{ scope.row.remarks }}
</template>
                    </el-table-column>
            <el-table-column label="排序" width="110">
<template slot-scope="scope">
    {{ scope.row.sort }}
</template>
                    </el-table-column>
            <el-table-column label="所属系统" width="110">
<template slot-scope="scope">
    {{ scope.row.sys }}
</template>
                    </el-table-column>
            <el-table-column label="更新者" width="110">
<template slot-scope="scope">
    {{ scope.row.updateBy }}
</template>
                    </el-table-column>
            <el-table-column label="更新时间" width="110">
<template slot-scope="scope">
    {{ scope.row.updateDate }}
</template>
                    </el-table-column>
            <el-table-column label="枚举值" width="110">
<template slot-scope="scope">
    {{ scope.row.value }}
</template>
                    </el-table-column>
                
                <el-table-column align="center" prop="created_at" label="操作" width="200">
                    <template slot-scope="scope">
<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="handleEdit(scope.$index, scope.row)">
  {{ scope.row.isSet?'保存':"修改" }}
</span>
<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)">
  删除
</span>
<span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
  取消
</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <div class="block">
            <!--弹框-->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="form">

                    <el-form-item v-if="addForVisible" label="角色Id">
<el-input v-model="form.id" auto-complete="off" />
                    </el-form-item>

    <el-form-item label="大类">
    <el-input v-model="form.bigType" placeholder="大类"  auto-complete="off"/>
</el-form-item>
                    <el-form-item label="代码">
    <el-input v-model="form.code" placeholder="代码"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="创建者">
    <el-input v-model="form.createBy" placeholder="创建者"  auto-complete="off"/>
</el-form-item>
            <el-form-item label="创建时间">
    <el-date-picker v-model="form.createDate" type="date" placeholder="创建时间">
    </el-date-picker>
</el-form-item>
                <el-form-item label="描述">
    <el-input v-model="form.desc" placeholder="描述"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="主键">
    <el-input v-model="form.id" placeholder="主键"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="命名空间">
    <el-input v-model="form.nameSpace" placeholder="命名空间"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="所属机构">
    <el-input v-model="form.organId" placeholder="所属机构"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="组织路径">
    <el-input v-model="form.organPath" placeholder="组织路径"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="父枚举">
    <el-input v-model="form.parentId" placeholder="父枚举"  auto-complete="off"/>
</el-form-item>
        <el-form-item label="备注">
    <el-input v-model="form.remarks" placeholder="备注"  auto-complete="off"/>
</el-form-item>
    <el-form-item label="排序">
    <el-select v-model="form.sort" placeholder="排序">
        <el-option
                v-for="item in query.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</el-form-item>
<el-form-item label="所属系统">
    <el-input v-model="form.sys" placeholder="所属系统"  auto-complete="off"/>
</el-form-item>
                    <el-form-item label="更新者">
    <el-input v-model="form.updateBy" placeholder="更新者"  auto-complete="off"/>
</el-form-item>
            <el-form-item label="更新时间">
    <el-date-picker v-model="form.updateDate" type="date" placeholder="更新时间">
    </el-date-picker>
</el-form-item>
                <el-form-item label="枚举值">
    <el-input v-model="form.value" placeholder="枚举值"  auto-complete="off"/>
</el-form-item>
        </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEditSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
    </div>

</template>

<script>
    import { getList, doDelete, doEdit } from '@/api/Dictionary/'

    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            },
            typeFilter(status) {
                const typeMap = {
                    '1': '超级管理员',
                    '2': '管理员',
                    '3': '普通用户'
                }
                const typeDesc = typeMap[status]
                return typeDesc
            }
        },
        data() {
            return {
                list: null,
                listLoading: true,
                total: 5,
                currentPage: 1,
                pageSize: 10,
                dialogFormVisible: false,
                addForVisible: false,
                form: {
            bigType:'',
            code:'',
            createBy:'',
            createDate:'',
            desc:'',
            id:'',
            nameSpace:'',
            organId:'',
            organPath:'',
            parentId:'',
            remarks:'',
            sort:'',
            sys:'',
            updateBy:'',
            updateDate:'',
            value:'',
            id:''
                },
                // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
                titleMap: {
                    add: '新增',
                    edit: '编辑'
                },
                // 新增和编辑弹框标题
                dialogStatus: '',
                query: {
                    params: {
                        bigType:'' //大类
                        ,
                        code:'' //代码
                        ,
                        createBy:'' //创建者
                        ,
                        createDate:'' //创建时间
                        ,
                        desc:'' //描述
                        ,
                        id:'' //主键
                        ,
                        nameSpace:'' //命名空间
                        ,
                        organId:'' //所属机构
                        ,
                        organPath:'' //组织路径
                        ,
                        parentId:'' //父枚举
                        ,
                        remarks:'' //备注
                        ,
                        sort:'' //排序
                        ,
                        sys:'' //所属系统
                        ,
                        updateBy:'' //更新者
                        ,
                        updateDate:'' //更新时间
                        ,
                        value:'' //枚举值

                    },
                    timeValue: '',
                    options: [{
                        value: '1',
                        label: '黄金糕'
                                            }, {
                        value: '2',
                        label: '双皮奶'
                                            }, {
                        value: '3',
                        label: '蚵仔煎'
                                            }, {
                        value: '4',
                        label: '龙须面'
                                            }, {
                        value: '5',
                        label: '北京烤鸭'
                    }],
                    value: ''
                }
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                this.listLoading = true
                getList(this.query.params , this.currentPage, this.pageSize).then(response => {
                    const data = response.data
                    this.total = data.totalCount
                    this.pageSize = data.pageSize
                    this.currentPage = data.currentPage
                    this.list = data.entities
                    this.listLoading = false
            })
            },
            handleSizeChange(val) {

                this.currentPage = 1
                this.pageSize = val
            },
            handleCurrentChange(val) {

                this.currentPage = val
            },
            // 新增
            handleAdd() {
                // 显示弹框
                this.dialogFormVisible = true
                // 新增弹框标题
                this.dialogStatus = 'add'
                this.form.bigType=''
                this.form.code=''
                this.form.createBy=''
                this.form.createDate=''
                this.form.desc=''
                this.form.id=''
                this.form.nameSpace=''
                this.form.organId=''
                this.form.organPath=''
                this.form.parentId=''
                this.form.remarks=''
                this.form.sort=''
                this.form.sys=''
                this.form.updateBy=''
                this.form.updateDate=''
                this.form.value=''
                this.addForVisible = false
            },
            // 编辑
            handleEdit(index, row) {
                console.log(index)
                console.log(row)

                this.form.bigType=row.bigType
                this.form.code=row.code
                this.form.createBy=row.createBy
                this.form.createDate=row.createDate
                this.form.desc=row.desc
                this.form.id=row.id
                this.form.nameSpace=row.nameSpace
                this.form.organId=row.organId
                this.form.organPath=row.organPath
                this.form.parentId=row.parentId
                this.form.remarks=row.remarks
                this.form.sort=row.sort
                this.form.sys=row.sys
                this.form.updateBy=row.updateBy
                this.form.updateDate=row.updateDate
                this.form.value=row.value
                
                this.addForVisible = true

                // 显示弹框
                this.dialogFormVisible = true
                // 编辑弹框标题
                this.dialogStatus = 'edit'
            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    doDelete(row.id).then(response => {
                    const data = response.data
                    console.log(data)
                    if(data.status == 1){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.fetchData();
                    }else if(data.status == 403){
                        this.$message({
                            type: 'warning',
                            message: data.description
                        })
                    }else{
                        this.$message({
                        type: 'info',
                        message: '操作失败!'
                        })
                    }
                })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
            },
            handleEditSave() {
                debugger

                doEdit(this.form).then(response => {
                    debugger
                    console.log(response)
                    const data = response.data
                    if(data.status){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                                             this.fetchData();
                                            }else{
                        this.$message({
                            type: 'info',
                            message: '操作失败!'
                        })
                    }
                    this.listLoading = false
                    this.dialogFormVisible = false
            })
            },
            handleReset() {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
            }
        }
    }
</script>
